<template>
  <EcDialog v-model="dialogVisible" class="form-dialog" auto-height>
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
    </template>
    <el-tabs v-model="activeName" class="demo-tabs" style="height: auto;">
      <el-tab-pane label="扫码充值" name="first">
        <div class="tips" v-if="msg==0">说明：支付宝扫码或在线登录支付，自动充值，无需审核！</div>
        <el-form style="padding:0 16px" ref="formRef" v-if="msg==0"
                 v-loading="dataLoading"
                 :disabled="readonly"
                 :model="formData"
                 :rules="formRules"
                 class="full-form"
                 label-width="auto"
                 status-icon>
          <el-form-item label="充值金额：" prop="ip">
            <el-input v-model="formData.ip" placeholder="请输入充值金额"/>
            <div class="msg">注：单笔不能少于1000，并且不高于20000</div>
          </el-form-item>
        </el-form>
        <div v-if="msg==1">
          <div>二维码</div>
          <div class="tips">请使用支付宝扫码支付（仅支持支付宝APP打开），扫码完成充值后，请手动刷新服务费余额</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="转账充值" name="second">
        <div class="second_tab">
          <div class="second_tab_title">收款账户</div>
          <div class="second_tab_item">收款名称:bbaabab</div>
          <div  class="second_tab_item">收款账号:bbaabab</div>
          <div  class="second_tab_item">开户行:bbaabab</div>
        </div>
        <el-form style="padding:0 16px" ref="formRef"
                 v-loading="dataLoading"
                 :disabled="readonly"
                 :model="formData"
                 :rules="formRules"
                 class="full-form"
                 label-width="auto"
                 status-icon>
          <el-form-item label="充值金额：" prop="amount">
            <el-input v-model="formData.amount" placeholder="请输入充值金额"/>
            <div class="msg">注：单笔不能少于1000，并且不高于20000</div>
          </el-form-item>
          <el-form-item label="支付凭证：" prop="head">
            <UploadImage v-model="formData.head" :customTip="'点击上传支付凭证'" :show-delete="true"/>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 底部操作区域 -->
    <template #footer v-if="!(msg === 1 && activeName === 'first')">
      <span class="dialog-footer">
        <el-button :loading="dataLoading" @click="dialogVisible = false">取 消</el-button>
        <el-button
          v-if="(msg === 0 && activeName === 'first') || (msg === 1 || activeName === 'second')"
          :loading="dataLoading"
          type="primary"
          @click="onSubmitForm(msg === 0 ? 1 : 2)">
      {{ msg === 0 && activeName === 'first' ? '下一步' : '提交审核' }}
</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import {computed, nextTick, reactive, ref} from 'vue';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import {
  getMenuList,
  SysMenuData,
  sysMenuTreeList, sysRoleAdd,
  SysRoleData,
  sysRoleInfo,
  sysRoleSaveOrUpdate, sysRoleUpdate
} from '@/api/api-sys.ts';
import useDialog from '@/hooks/use-dialog.ts';
import { EcDialog } from '@/components/dialog';
import { SvgIcon } from '@/components/icon';
import {merchantList, whiteAdd, whiteEdit, whiteInfo} from "@/api/api-store.ts";
import {UploadImage} from "@/components/upload";
// import { UploadImage } from '@/components/upload';
defineOptions({name: 'SysRoleForm'});

const formRef = ref<FormInstance>();
const formLoading = ref(false) // 表单是否加载中
const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);

// 默认表单数据
let defaultForm: SysRoleData = {
  id: 0,
  amount:'',
  head:''
};
const activeName=ref('first')
const msg=ref(0)
// 表单数据
const formData = ref({...defaultForm});

// 表单验证规则
const formRules = reactive<FormRules>({
  amount: [{required: true, message: '金额不能为空', trigger: 'blur'}],
  head: [{required: true, message: '支付凭证不能为空', trigger: 'blur'}],
});
const options=ref<array>([])
/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value || menuTreeLoading.value;
})

/** 是否只读 */
const readonly = computed(() => {
  // return dialogMode.value == 0;
});

/** 是否新增 */
const isCreate = ref();

const menuData = ref<SysMenuData[]>([]);
const menuTreeRef = ref();
const menuTreeProps = {
  label: 'title',
  children: 'child',
};
const menuTreeLoading = ref(false)
const reverseWithChild=(arr:any)=> {
  return arr.slice().reverse().map(item => {
    if (Array.isArray(item.child)) {
      item.child = reverseWithChild(item.child);
    }
    return item;
  });
}
/** 打开弹窗 */
const open = async (mode: number, row?: any) => {
  // dialogMode.value = mode;
  dialogTitle.value = '服务费充值';
  dialogVisible.value = true;
  // 重置表单
  resetForm();
  // isCreate.value=row.id
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 表单提交 */
const emit = defineEmits(['success']);
const onSubmitForm = async (ids:any) => {
  await formRef.value?.validate((valid, fields) => {
    if (!valid) {
      ElMessage({type: 'error', message: '请检查是否有必填项未完善',});
      return
    }
  if(ids==1){
    msg.value=1
  }else{
    const loading = ElLoading.service({
      lock: true,
      text: '正在提交中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    console.log("请求接口")
  }
    // 提交数据
    // if(isCreate.value==undefined){
    //
    //   whiteAdd(formData.value, {action:'add'}).then(response => {
    //     // 提示信息
    //     ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
    //     // 发送操作成功的事件
    //     emit('success')
    //     // 隐藏窗口
    //     dialogVisible.value = false
    //   }).finally(() => loading.close())
    // }else{
    //   whiteEdit(formData.value, {action:'update'}).then(response => {
    //     // 提示信息
    //     ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
    //     // 发送操作成功的事件
    //     emit('success')
    //     // 隐藏窗口
    //     dialogVisible.value = false
    //   }).finally(() => loading.close())
    // }
  });
};

/** 重置表单 */
const resetForm = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
  msg.value=0
  activeName.value='first'
};

</script>

<style lang="scss" scoped>
.form-dialog {
  .el-checkbox-group .el-checkbox {
    float: left;
    width: 150px;
    padding-right: 10px;
    margin: 0;
  }

  .permission-tree {
    width: 100%;
  }
  .tips{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #F5222D;
    padding: 16px;
  }
  .msg{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }
  .second_tab{
    padding: 16px;
    background: #F5F5F5;
    border-radius: 4px;
    margin-bottom: 20px;
    .second_tab_title{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
    }
    .second_tab_item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }
    .second_tab_item:last-child{
      margin-bottom: 0;
    }
  }
}
</style>
